<template>
	<view>
		<view class="f1">
			<image src="/static/img/play/bgimage.jpg" style="width: 750rpx; opacity: 0.2;" mode="widthFix"></image>
			<view class="f1-title">
				<image src="/static/img/play/f1fx.png" style="width: 72rpx;" mode="widthFix"></image>
				<text>海阔天空-张元浩</text>
				<image src="/static/img/play/HQ.png" style="width: 46rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view class="f2">
			<image ref="yuan" src="/static/img/play/yuan.jpg"></image>

		</view>
		<view class="f3">
			<text>今夜我，寒夜里看雪飘过</text>
			<text>怀着冷暖的心窝飘远方</text>
		</view>

		<view class="f4">
			<image style='width:50rpx' src="/static/img/play/up.png" mode="widthFix"></image>
			<image @click="play" style='width:130rpx;margin: 0 120rpx;' :src="`/static/img/play/play${now}.png`"
				mode="widthFix">
			</image>
			<image style='width:50rpx' src="/static/img/play/next.png" mode="widthFix"></image>
		</view>

		<view class="f5">
			<view class="progress-box">
				<progress :percent="30" show-info activeColor="#ffc05f" stroke-width="3" />
			</view>
			<text class="time">04:39</text>
		</view>

		<view class="f6">
			<view class="heart">
				<image src="/static/img/play/heart.png" mode="widthFix"></image>
				<text>999+</text>
			</view>
			<view class="msg">
				<image src="/static/img/play/msg.png" mode="widthFix"></image>
				<text>999+</text>
			</view>
			<view class="xiazai">
				<image src="/static/img/play/xiazai.png" mode="widthFix"></image>
				<text>999+</text>
			</view>
			<view class="fenxiang">
				<image src="/static/img/play/fenxiang.png" mode="widthFix"></image>
				<text>999+</text>
			</view>
		</view>

		<view>
			<audio @timeupdate="update" ref="mp3" style="position: absolute; z-index: -999; opacity: 0;"
				src="http://m8.music.126.net/20221113161342/f006884ef38b1159abdbe00934818dbc/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3">></audio>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				now: 1,
				pgList: [0, 0, 3, 0]
			}
		},
		methods: {
			play() {
				if (!this.$refs.mp3.$refs.audio.paused) {
					this.$refs.mp3.$refs.audio.pause()
					this.$refs.yuan.$el.style.animationPlayState = "paused"
					this.now = 1
				} else {
					this.$refs.mp3.$refs.audio.play()
					this.$refs.yuan.$el.style.animationPlayState = "running"
					this.now = 2
				}
			},

			update() {
				console.log(this.$refs.mp3.$refs.audio.duration)
				console.log(this.$refs.mp3.$refs.audio.currentTime)
			}
		}
	}
</script>

<style lang="scss">
	.f1 {
		background-image: linear-gradient(0deg, rgba(255, 192, 95, 0.3) 33%, rgba(255, 192, 95, 0.6) 66%, rgba(255, 192, 95, 1) 100%);

		.f1-title {
			flex-direction: row;
			position: absolute;
			top: 73rpx;
			left: 28rpx;
			align-items: center;

			text {
				margin: 0 45rpx;
				color: $uni-bg-color;
			}
		}
	}

	.f2 {
		align-items: center;


		image {
			width: 510rpx;
			height: 510rpx;
			border-radius: 50%;
			border: solid rgba(0, 0, 0, 0.3) 20rpx;
			position: absolute;
			top: 200rpx;
			animation: scile 10s infinite linear;
			animation-play-state: paused;
		}
	}

	@keyframes scile {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.f3 {
		margin-top: 255rpx;
		position: relative;
		text-align: center;

		text {
			margin-bottom: 30rpx;
		}
	}

	.f4 {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.f5 {
		position: relative;

		// margin-top: ;
		.time {
			position: absolute;
			top: 15px;
			left: 80px;
		}
	}

	.f6 {
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;

		view {
			flex-direction: row;
		}

		image {
			width: 45rpx;
			margin-right: 20rpx;
		}
	}

	.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 70rpx;
	}
</style>
